<template>
    <breadCrumb :item="item"></breadCrumb>
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-header">
                <div class="left-wrapped">
                    <div class="search-wrapped">
                        <el-input class="w-50 m-2" size="large" placeholder="输入账号进行搜索" v-model="search"
                            :prefix-icon="Search" clearable @change="searchuser" @clear="clearOperation" />
                    </div>
                    <div class="select-wrapped">
                        <el-select v-model="formData.department" placeholder="请选择部门" style="width: 150px;" clearable
                            @clear="getUserList" @change="searchByDepartment">
                            <el-option v-for="(item, index) in departmentData" :label="item" :value="item"
                                :key="index" />
                        </el-select>
                    </div>
                </div>
                <div class="button-wrapped">
                    <el-button type="primary" plain @click="showBan">筛选冻结用户</el-button>
                    <el-button type="primary" plain @click="getUserList">显示全部用户</el-button>
                </div>
            </div>
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%;" border class="custom-table" @row-dblclick="openDetail">
                    <el-table-column type="index" width="50" align='center' />
                    <el-table-column prop="account" label="账号" align='center' />
                    <el-table-column prop="name" label="姓名" align='center' />
                    <el-table-column prop="identity" label="身份" align='center' />
                    <el-table-column prop="sex" label="性别" align='center' />
                    <el-table-column prop="department" label="部门" align='center' />
                    <el-table-column prop="email" label="邮箱" align='center' />
                    <el-table-column prop="status" label="状态" align='center'>
                        <template #default="{ row }">
                            <div>
                                <el-tag v-if="row.status == 0" type="success">正常</el-tag>
                                <el-tag v-else type="primary">冻结</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" align='center'>
                        <template #default="{ row }">
                            <div>{{ row.create_time?.slice(0, 10) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align='center'>
                        <template #default="{ row }">
                            <div>
                                <el-button type="primary" @click="banUser(row.ID, 1)" :disabled="row.status == 1">冻结</el-button>
                                <el-button type="success" @click="hotUser(row.ID, 0)" :disabled="row.status == 0">解冻</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="paginationData.pageSize" :pager-count="7" layout="prev, pager, next"
                :total="paginationData.total" :current-page="paginationData.currentPage"
                :page-count="paginationData.pageCount" @current-change="currentChange"
                :hide-on-single-page="displayValue" />
        </div>
    </div>
    <detail ref="Detail"></detail>
</template>
<script setup lang="ts">
import breadCrumb from '@/components/breadCrumb.vue'
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { bus } from '@/utils/mitt.js'
import {  searchUser, getUserByDepartment, getUserLength, getUserListByPage, getFrozenUser, controlStatus } from '@/api/userInfo.js'
import { ElMessage } from 'element-plus'
import detail from '../component/user_detail.vue'
import { getDepartment } from '@/api/setting.js'

const item = ref({
    first: '用户管理',
    second: '用户'
})
// 搜索
const search = ref('')
// 表格内容
const tableData = ref()
//搜索用户
const searchuser = async () => {
    try {
        const res = await searchUser(search.value, '用户')
        tableData.value = res.data
    } catch (error) {
        ElMessage.error('搜索用户时发生错误')
    }
}
//下拉框选择部门
const formData = ref({
    department: ''
})
// 部门数据
const departmentData = ref([])
const returnDepartment = async () => {
    const res = await getDepartment()
    departmentData.value = res.data
}
returnDepartment()
//根据部门搜索用户
const searchByDepartment = async () => {
    try {
        const res = await getUserByDepartment(formData.value.department)
        tableData.value = res.data
    } catch (error) {
        ElMessage.error('搜索用户时发生错误')
    }
}
//分页数据
const paginationData = reactive({
    // 当前页
    currentPage: 1,
    // 每页显示多少条
    pageSize: 10,
    // 总条数
    total: null,
    // 总页数
    pageCount: null
})
//当只有一页时隐藏分页
const displayValue = ref(false)
//获取当前页面用户总数
const getUserLengthData = async () => {
    const res = await getUserLength('用户')
    paginationData.total = res.data[0].count
    paginationData.pageCount = Math.ceil(res.data[0].count / paginationData.pageSize)
    // 当只有一页时隐藏分页
    if (paginationData.pageCount === 1) {
        displayValue.value = true
    }
}
getUserLengthData()
//获取第一页的数据
const getFirstPage = async () => {
    const res = await getUserListByPage('用户', 1)
    tableData.value = res.data.data
    paginationData.currentPage = 1
}
getFirstPage()
//页数改变
const currentChange = async (val) => {
    paginationData.currentPage = val
    const res = await getUserListByPage('用户', val)
    tableData.value = res.data.data
}
//获取用户列表
const getUserList = () => {
    getFirstPage()
}
getUserList()
//清空操作
const clearOperation = () => {
    getFirstPage()
}
//显示冻结用户
const showBan = async () => {
    try {
        const res = await getFrozenUser()
        tableData.value = res.data
        ElMessage.success('获取冻结用户成功')
    } catch (error) {
        ElMessage.error('获取冻结用户时发生错误')
    }
}
//冻结用户
const banUser = async (id, status) => {
    try {
        const res = await controlStatus(id, status)
        if (res.data.status === 0) {
            ElMessage.success('冻结用户成功')
            const res = await getUserListByPage('用户', paginationData.currentPage)
            tableData.value = res.data.data
        }
    } catch (error) {
        ElMessage.error('冻结用户时发生错误')
    }
}
//解冻用户
const hotUser = async (id, status) => {
    try {
        const res = await controlStatus(id, status)
        if (res.data.status === 0) {
            ElMessage.success('解冻用户成功')
            const res = await getUserListByPage('用户', paginationData.currentPage)
            tableData.value = res.data.data
        }
    } catch (error) {
        ElMessage.error('解冻用户时发生错误')
    }
}
//打开用户详情
const Detail = ref()
const openDetail = (row) => {
    Detail.value.open()
    bus.emit('userId', row)
}
//对用户操作后更新用户列表
bus.on('offDialog',async (id) => {
    const current = paginationData.currentPage
    if (id == 1) {
        const res = await getUserListByPage('用户', paginationData.currentPage)
        tableData.value = res.data.data
        if (tableData.value.length == 0) {
            paginationData.currentPage = current - 1
            const res = await getUserListByPage('用户', paginationData.currentPage)
            tableData.value = res.data.data
            getUserLengthData()
        }
    }
})
</script>
<style lang="scss" scoped></style>